<template>
	<view class="data">

		<view :id="data.id ? '' : 'nohave'" class="nav nav_bar flex_r_between"
			:style="`background: rgba(255, 255, 255,${data.id ? trans : 0});padding-left: 32rpx;padding-right: 32rpx;`">
			<view style="width: 30px;height: 30px;background-color: rgba(0, 0, 0,0.6);border-radius: 15px;"
				class="flex_r_around" @click="back">
				<uni-icons type="back" size="20" color="#FFF"></uni-icons>
			</view>

			<view class="actions flex_center"></view>
		</view>

		<view class="header_banner">
			<swiper class="swiper-box" @change="change" :current="current">
				<swiper-item v-for="(item, index) in data.images" :key="index">
					<image @click="$util.previewImage(data.images , index)" :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="current" v-if="data.images">
				{{current+1}}/{{data.images.length}}
			</view>
		</view>

		<view class="content">
			<view class="user">
				<view class="info flex_center">
					<view class="avatar">
						<image :src="user.avatar" mode="aspectFill"></image>
					</view>
					<view class="name">
						<view class="nickname flex_center">
							<text>{{ user.nickname || '' }}</text>
							<view class="online flex_center">
								<view class="online_icon flex_r_around">
									<view></view>
								</view>
								<view class="online_text">在线</view>
							</view>
						</view>
						<view class="user_id flex_center">
							<view @click="onCopy(user.id)">ID {{ user.id }}</view>
							<image @click="onCopy(user.id)" :src="$util.prefix('public/copy.png')" mode="aspectFill">
							</image>
						</view>
						<view class="user_list flex_center">
							<view class="item flex_center">
								<image :src="$util.prefix(`public/sex_${user.gender}_no_bg.png`)" mode=""></image>
								<text>{{ user.age }}岁</text>
							</view>
							<view class="item flex_center">
								<text>IP属地：{{ user.city || '未知' }}</text>
							</view>

						</view>
					</view>
				</view>
			</view>

			<view class="store" v-if="user.sign_store_id > 0 || user.store_id > 0">
				<view class="store_tab flex_r_between">
					<view class="store_tab_item flex_r_around" :id="store_tab == 1 ? 'select' : ''"
						@click="onStoreTab(1)">
						<text>他的商品</text>
					</view>
					<view class="store_tab_item flex_r_around" :id="store_tab == 2 ? 'select' : ''"
						@click="onStoreTab(2)">
						<text>所属店铺</text>
					</view>
					<view class="store_tab_item flex_r_around" :id="store_tab == 3 ? 'select' : ''"
						@click="onStoreTab(3)">
						<text>资质认证</text>
					</view>
				</view>

				<view class="store_content">
					<view class="content_product" v-if="store_tab == 1">
						<view class="item flex_r_between" v-for="(item,index) in product_list" :key="index"
							v-show="show_more_product || index < 2"
							:id="(index == 1 && !show_more_product) || (index == product_list.length-1 && show_more_product) ? 'noborder' : ''">
							<view class="avatar">
								<image v-show="item.goods_image.length" :src="item.goods_image[0]" mode="aspectFill">
								</image>
							</view>
							<view class="name">
								<view class="goods_name hidden_3">
									{{ item.name }}
								</view>

								<view class="price flex_r_between">
									<text>￥{{item.price}}</text>
									<view class="flex_r_around">
										<text>购买</text>
									</view>
								</view>
							</view>
						</view>

						<view class="show_more flex_c" @click="show_more_product = !show_more_product">
							<view class="block flex_center">
								<text>查看更多</text>
								<view class="icon">
									<u-icon :name="show_more_product ? 'arrow-up' : 'arrow-down'" color="#D8D8D8"
										size="24rpx"></u-icon>
								</view>
							</view>
						</view>
					</view>

					<view class="content_store flex_center" v-if="store_tab == 2">
						<view class="left flex_center">
							<view class="avatar">
								<image :src="user.avatar" mode="aspectFill"></image>
							</view>
							<view class="nickname flex_c">
								<view class="name flex_center">
									<text>{{ store_info.store_name }}</text>
									<image @click="$util.previewImage([store_info.business_license_img])"
										:src="$util.prefix('public/store_certification.png')" mode="aspectFill"></image>
								</view>
								<view class="sign hidden_3">
									{{ store_info.signature }}
								</view>
							</view>
						</view>
						<view class="right">
							<!-- <text>进入店铺</text> -->
						</view>
					</view>

					<view class="content_auth" v-if="store_tab == 3">
						<view class="auth_title">实名认证</view>
						<view class="real_name flex_center">
							<text>{{ auth_info.name }}</text>
							<text>{{ auth_info.id_card_num }}</text>
						</view>
						<view class="h60"></view>
						<view class="auth_title">资格认证</view>
						<image :src="auth_info.certificate" mode="widthFix"></image>
					</view>

				</view>

			</view>

			<view class="line"></view>

			<view class="tags" v-if="data.type != 2">
				<view class="title">基础信息</view>

				<view class="tags_list flex_center">
					<view class="item" v-for="(item,index) in data.content" v-if="item && 
							index != 'category_id' &&
							index != 'category_pid' &&
							index != 'category_pname' &&
							index != 'category_name' &&
							index != 'province' &&
							index != 'area' && 
							index != 'store_category_id' && 
							index != 'store_category_pid' &&
							index != 'store_category_pname'&& 
							index != 'store_category_name'
							" :key="index">
						{{ item }} {{
							index == 'height' ? 'cm'
							: index == 'age' ? '岁'
							: ''
						}}
					</view>

					<view class="item" v-if="data.content.store_category_pname">
						{{ '求职行业' }}：{{ data.content.store_category_pname }} / {{ data.content.store_category_name }}
					</view>
					<view class="item" v-if="data.content.category_pname">
						{{ data.type == 1 ? '职业' : '求职岗位' }}：{{ data.content.category_pname }} /
						{{ data.content.category_name }}
					</view>
				</view>
			</view>

			<view class="tags" v-else>
				<view class="tab_title flex_r_between">
					<view class="tab flex_c" @click="tab = 1" :id="tab == 1 ? 'select' : ''">
						<text>基础信息</text>
						<i></i>
					</view>

					<view class="tab flex_c" @click="tab = 2" :id="tab == 2 ? 'select' : ''">
						<text>对他要求</text>
						<i></i>
					</view>
				</view>

				<view class="tags_list flex_center" v-if="tab == 1">
					<view class="item" v-for="(item,index) in data.content.mine" v-if="item && 
							index != 'category_id' &&
							index != 'category_pname' &&
							index != 'category_name' &&
							index != 'category_pid' &&
							index != 'province' &&
							index != 'area'
							" :key="index">
						{{ item }} {{
							index == 'height' ? 'cm'
							: index == 'age' ? '岁'
							: index == 'salary' ? '万元/年薪'
							: ''
						}}
					</view>

					<view class="item" v-if="data.content.mine.category_name">
						{{ data.content.mine.category_pname }} / {{ data.content.mine.category_name }}
					</view>
				</view>

				<view class="tags_list flex_center" v-if="tab == 2">
					<view class="item" v-for="(item,index) in data.content.other" v-if="item && 
							index != 'other_category_id' &&
							index != 'other_category_pid' &&
							index != 'other_province' &&
							index != 'other_area'
							" :key="index">
						{{ item }} {{
							index == 'other_height' ? 'cm'
							: index == 'other_age' ? '岁'
							: index == 'other_salary' ? '万元/年薪'
							: ''
						}}
					</view>
					<view class="item" v-if="data.content.other.other_category_name">
						{{ data.content.other.other_category_pname }} / {{ data.content.other.other_category_pname }}
					</view>
				</view>
			</view>

			<view class="introduce">
				<view class="title">个人介绍</view>

				<view class="textarea">
					<textarea v-model="data.introduce" :auto-height="true"></textarea>
				</view>
			</view>

			<!-- <view class="product flex_center" v-if="data.action_type == 1">
				<view class="avatar">
					<image v-show="data.action.goods_image.length" :src="data.action.goods_image[0]" mode="aspectFill">
					</image>
				</view>
				<view class="name">
					<view class="goods_name hidden_3">
						{{ data.action.name }}
					</view>

					<view class="price flex_r_between">
						<text>￥{{data.action.price}}</text>
						<view>购买</view>
					</view>
				</view>
			</view> -->

			<!-- <view class="product flex_center" v-if="data.action_type == 2">
				<view class="avatar">
					<image :src="data.action.image" mode="aspectFill"></image>
				</view>
				<view class="name">
					<view class="goods_name hidden_3">
						{{ data.action.title }}
					</view>

					<view class="price flex_r_between">
						<text>￥{{data.action.active_price}}</text>
						<view>购买</view>
					</view>
				</view>
			</view> -->

			<view class="active" v-if="list.length">
				<view class="title">动态</view>
				<!-- :height="item.screenType == 1 ? 130 : 234" -->
				<custom-waterfalls-flow :value="list" imageKey="image">
					<template v-slot:default="item">
						<view class="waterfalls_item">
							<view class="waterfalls_content hidden_3">{{item.content || ''}}</view>
							<view class="bottom flex_center">
								<view class="user_info flex_center">
									<image :src="item.avatar" mode="aspectFill"></image>
									<text class="hidden">{{ item.nickname }}</text>
								</view>

								<view class="see flex_center">
									<uni-icons type="eye" color="#666666" size="14"></uni-icons>
									<view>{{ item.read_num }}</view>
								</view>
							</view>
						</view>
					</template>
				</custom-waterfalls-flow>
			</view>

		</view>

		<view class="fixed_btn flex_r_around">
			<view @click="onSubmit(false)">发布</view>
		</view>

		<u-modal :show="show_back" title="提示" content='发布成功' :closeOnClickOverlay="true" cancelText="我知道了"
			:showConfirmButton='false' :showCancelButton='true' @close="show_back = false" @cancel="onBack">
		</u-modal>

		<u-popup :safeAreaInsetBottom="false" mode="bottom" :show="to_pay_show" @close="to_pay_show = false"
			bgColor="transparent">
			<view class="to_pay_show flex_c">
				<view class="title">支付</view>
				<view class="price">
					<i>￥</i>
					<text>{{ Number(order_price).toFixed(2) }}</text>
				</view>
				<view class="pay_type">

					<view class="item flex_r_between" @click="pay_type = 1">
						<view class="left flex_center">
							<image src="/static/public/wechat.png"></image>
							<text>微信</text>
						</view>

						<view class="right flex_center">
							<text></text>
							<image :src="`/static/public/select${pay_type == 1 ? '_s' : ''}.png`"></image>
						</view>
					</view>

					<view class="item flex_r_between" @click="pay_type = 2">
						<view class="left flex_center">
							<image src="/static/public/alipay.png"></image>
							<text>支付宝</text>
						</view>

						<view class="right flex_center">
							<text></text>
							<image :src="`/static/public/select${pay_type == 2 ? '_s' : ''}.png`"></image>
						</view>
					</view>

				</view>
				<view class="btn" @click="toPay">确认支付</view>
			</view>
		</u-popup>

		<u-popup :safeAreaInsetBottom="false" mode="center" :show="show_modal" @close="show_modal = false"
			bgColor="transparent">
			<view class="modal flex_c">
				<view class="modal_icon">
					<u-icon name="error-circle-fill" color="#FD2A53" size="112rpx"></u-icon>
				</view>
				<view class="modal_title">
					特别提醒
				</view>
				<view class="modal_text">
					该圈主设置需完成实名认证和资格认证
				</view>
				<view class="modal_text">
					才能发布名片
				</view>
				<view class="modal_button flex_r_around" @click="toAuth">
					<text>去认证</text>
				</view>
				<view class="modal_close" @click="show_modal = false">
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx"></u-icon>
				</view>
			</view>
		</u-popup>

		<u-popup :safeAreaInsetBottom="false" mode="center" :show="show_pay" @close="show_pay = false"
			bgColor="transparent">
			<view class="modal flex_c">
				<view class="modal_icon">
					<u-icon name="error-circle-fill" color="#FD2A53" size="112rpx"></u-icon>
				</view>
				<view class="modal_title">
					特别提醒
				</view>
				<view class="modal_text">
					该圈主设置需发布名片需
				</view>
				<view class="modal_text">
					支付{{ order_price }}
				</view>
				<view class="modal_button flex_r_around" @click="to_pay_show = true">
					<text>去支付</text>
				</view>
				<view class="modal_close" @click="show_pay = false">
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx"></u-icon>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				trans: 0,

				tab: 1,

				current: 0,
				data: {
					images: [],
					content: {},
					tags: [],
				},

				user: {},

				list: [],
				page: 1,
				total: 1,



				// 弹窗
				show_back: false,
				// 修改支付
				to_pay_show: false,
				order_id: 0,
				order_price: 0,
				pay_type: 1,

				store_tab: 1,

				product_list: [],
				show_more_product: false,

				auth_info: {},

				store_info: {},


				show_modal: false,
				show_pay: false,

			}
		},
		methods: {

			onBack() {
				this.show_back = false;
				this.$util.back();
			},

			back() {
				this.$util.back();
			},

			change(e) {
				this.current = e.detail.current;
			},

			getList() {
				this.$get('/article/getPublishList', {
					page: this.page,
				}).then(res => {
					this.list.push(...res.data.data);
					this.total = res.data.total;
				})
			},

			// 交友圈  主播-免费发布   用户-付费
			// 按摩圈  技师完成资格认证才可以发布
			onSubmit(pay) {
				uni.showLoading({
					mask: true
				});
				this.$post('/circle.circle_call_card/createCard', {
					circle_id: this.data.circle.id || 0,
					type: this.data.type,
					images: this.data.images.join(','),
					introduce: this.data.introduce,
					action_type: this.data.action_type == 3 ? 1 : this.data.action_type,
					action_id: this.data.action.id || 0,
					content: JSON.stringify(this.data.content),
					id: this.data.id,
					is_pay: pay ? 1 : 0,
					tags: this.data.tags.join(','),
				}, true, (res) => {
					// return AjaxUtils::error('请先完成技师资料',[],4001);
					// return AjaxUtils::error('请先完成身份认证',[],4002);
					// return AjaxUtils::error('请先完成职业认证',[],4003); @张嘉轩  
					uni.hideLoading();
					if (res.code == 4001 || res.code == 4002 || res.code == 4003) {
						this.show_modal = true;
					} else if (res.code == 2010) {
						this.order_id = res.data.id;
						this.order_price = res.data.price;
						// this.to_pay_show = true;
						this.show_pay = true;
					} else if (res.code == 401) {
						this.$native.toJinBiRecharge();
					}
				}).then(res => {
					uni.hideLoading();
					this.show_back = true;
					if (this.data.id && this.data.id != '0') {
						this.$native.setCardSuccess();
					}
				});

			},

			// 调用原生支付
			toPay() {
				uni.showLoading({
					mask: true
				});
				this.$post('/pay/sendCallCard', {
					pay_type: this.pay_type,
					order_id: this.order_id
				}, true, () => {
					uni.hideLoading();
				}).then(res => {
					this.$native.toPayCard({
						data: res.data,
						pay_type: this.pay_type
					});
				});
			},

			paySuccess() {
				this.to_pay_show = false;
				this.show_back = true;
				this.onSubmit(true);
				uni.hideLoading();
			},

			payFail() {
				uni.hideLoading();
			},

			onCopy(str) {
				uni.setClipboardData({
					data: `${str}`,
					showToast: false,
					success: () => {
						this.$util.msg('已复制到剪贴板');
					}
				});
			},

			getUser() {
				this.$post('/user/info').then(res => {
					this.user = res.data;
					uni.setStorageSync('user', this.user);
					if (this.user.store_id > 0 || this.user.sign_store_id > 0) {
						if (this.user.store_id > 0) {
							this.getProductList(this.user.store_id);
							this.getStoreInfo(this.user.store_id);
						} else if (this.user.sign_store_id > 0) {
							this.getProductList(this.user.sign_store_id);
							this.getStoreInfo(this.user.sign_store_id);
						}
					}
				})
			},

			onStoreTab(e) {
				if (this.store_tab == e) {
					return;
				}
				this.store_tab = e;
				if (this.store_tab == 3) {
					this.getStatus();
				}
			},

			getProductList(id) {
				this.$get('/store_goods/getGoodsList', {
					store_id: id,
				}).then(res => {
					this.product_list.push(...res.data.data);
				})
			},

			getStatus() {
				this.$post('/user/getProviderInfo').then(res => {
					this.auth_info = res.data || {};
					this.auth_info.name = this.EncryptName(this.auth_info.name);
					this.auth_info.id_card_num = this.EncryptName(this.auth_info.id_card_num);
				})
			},

			EncryptName(name) {
				let newStr;
				if (name.length === 2) {
					newStr = name.substr(0, 1) + '*';
				} else if (name.length > 2) {
					let char = '';
					for (let i = 0, len = name.length - 2; i < len; i++) {
						char += '*';
					}
					newStr = name.substr(0, 1) + char + name.substr(-1, 1);
				} else {
					newStr = name;
				}

				return newStr;
			},

			EncryptCert(cert) {
				return cert.replace(/^(.{3})(?:\d+)(.{3})$/, "$1*********$2")
			},

			getStoreInfo(id) {
				this.$get('/store/getStoreInfo', {
					store_id: id
				}).then(res => {
					this.store_info = res.data;
				});
			},

			toAuth() {
				this.$util.toUrl('/pages/auth/authcenter?from_type=1');
			},

		},

		onLoad(option) {
			window.paySuccess = this.paySuccess;
			window.payFail = this.payFail;
			this.data = JSON.parse(option.data);
			this.getList();
			this.getUser();
		},

		onPageScroll: function(e) { //nvue暂不支持滚动监听，可用bindingx代替
			if (e.scrollTop <= 200) {
				this.trans = e.scrollTop / 200;
			} else {
				this.trans = 1
			}
		},
	}
</script>

<style lang="less" scoped>
	#nohave {
		padding-top: 0 !important;
	}

	.data {
		padding-bottom: 200rpx;
		background: #FFF;
	}

	.header_banner {
		width: 100vw;
		height: 100vw;

		position: relative;

		.swiper-box {
			width: 100vw;
			height: 100vw;

			swiper-item {
				width: 100vw;
				height: 100vw;

				image {
					width: 100vw;
					height: 100vw;
				}
			}
		}

		.current {
			position: absolute;
			right: 32rpx;
			bottom: 60rpx;
			height: 38rpx;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 20rpx;
			padding: 0 12rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 38rpx;
		}
	}

	.banner_preview {
		margin: 32rpx;

		.banner_list {
			image {
				flex-shrink: 0;
				width: 96rpx;
				height: 96rpx;
				border-radius: 16rpx;
				margin-right: 16rpx;
				border: 4rpx solid transparent;
			}
		}

		#select {
			border: 4rpx solid #FD2A53;
		}
	}

	.content {
		width: 100vw;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		margin-top: -40rpx;
		position: relative;
		z-index: 2;
		overflow: hidden;

		.title {
			font-weight: 600;
			font-size: 32rpx;
			color: #131313;
		}
	}

	.user {
		background: url(https://qiniu-cdn.maeiyun.com//h5static/partner/card_preview_user_bg.png) 0 0 no-repeat;
		background-size: 100% 120%;
		background-color: #FFF;
		padding: 48rpx 32rpx 48rpx;

		.info {
			.avatar {
				width: 132rpx;
				height: 132rpx;
				border: 4rpx solid #FFFFFF;
				border-radius: 64rpx;
				overflow: hidden;
				margin-right: 16rpx;

				image {
					width: 128rpx;
					height: 128rpx;
					background: #D8D8D8;
					border-radius: 64rpx;
				}
			}

			.name {
				.nickname {
					text {
						font-weight: 500;
						font-size: 40rpx;
						color: #131313;
						line-height: 40rpx;
					}

					.online {
						.online_icon {
							width: 24rpx;
							height: 24rpx;
							border-radius: 12rpx;
							background: rgba(31, 193, 41, 0.2);
							margin: 0 8rpx 0 16rpx;

							view {
								width: 12rpx;
								height: 12rpx;
								border-radius: 6rpx;
								background: #1FC129;
							}
						}

						.online_text {
							font-weight: 500;
							font-size: 28rpx;
							color: #1FC129;
							line-height: 40rpx;
						}
					}
				}

				.user_id {
					margin-top: 12rpx;

					view {
						font-size: 24rpx;
						color: #666666;
						margin: 0 8rpx 0 0;
					}

					image {
						width: 20rpx;
						height: 20rpx;
					}

				}

				.user_list {
					margin-top: 16rpx;

					.item {
						margin-right: 16rpx;

						image {
							width: 20rpx;
							height: 20rpx;
							margin-right: 8rpx;
						}

						text {
							font-size: 24rpx;
							color: #131313;
						}
					}
				}
			}
		}
	}

	.line {
		width: 100vw;
		height: 16rpx;
		background: #F1F1F1;
		margin: 0 0 28rpx;
	}

	.tags {
		padding: 0 32rpx;

		.tab_title {

			padding: 0 136rpx;
			border-bottom: 2rpx solid #F1F1F1;

			#select {
				i {
					background: #FD2A53;
				}
			}

			.tab {
				text {
					font-weight: 600;
					font-size: 32rpx;
					color: #131313;
					line-height: 44rpx;
					margin-bottom: 24rpx;
				}

				i {
					width: 48rpx;
					height: 4rpx;
				}
			}
		}

		.tags_list {
			flex-wrap: wrap;
		}

		.item {
			height: 52rpx;
			line-height: 52rpx;
			flex-shrink: 0;
			background: #FFFFFF;
			border-radius: 28rpx;
			border: 2rpx solid #EEEEEE;
			padding: 0 24rpx;
			margin: 24rpx 24rpx 0 0;
			font-size: 28rpx;
			color: #333333;
			box-sizing: content-box;
		}
	}

	.introduce {
		padding: 0 32rpx;
		margin: 48rpx 0;

		.textarea {
			margin-top: 24rpx;
			overflow: hidden;

			textarea {
				width: 100%;
				font-size: 26rpx;
				color: #666666;
				line-height: 36rpx;
			}
		}
	}

	.product {
		margin-left: 32rpx;
		width: 544rpx;
		background: #F1F1F1;
		border-radius: 24rpx;
		border: 2rpx solid #EEEEEE;
		padding: 6rpx 16rpx 6rpx 6rpx;
		margin-bottom: 24rpx;

		.avatar {
			width: 144rpx;
			height: 144rpx;
			margin-right: 18rpx;

			image {
				width: 144rpx;
				height: 144rpx;
				border-radius: 20rpx;
			}
		}

		.name {
			flex: 1;

			.goods_name {
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 6rpx;
			}

			.price {
				text {
					font-weight: 600;
					font-size: 24rpx;
					color: #FD2A53;
				}

				view {
					font-size: 28rpx;
					color: #FD2A53;
					line-height: 40rpx;
				}
			}
		}
	}

	.red_line {
		width: 750rpx;
		height: 58rpx;
		background: #FFEAEE;
		border: 2rpx solid #FFBAC8;
		margin: 48rpx 0 40rpx;

		.box {
			text {
				font-weight: 500;
				font-size: 28rpx;
				color: #FD2A53;
			}
		}
	}

	.active {
		padding: 0 32rpx;

		.title {
			margin-bottom: 20rpx;
		}

		.waterfalls_item {
			padding: 16rpx;
			overflow: hidden;

			.waterfalls_content {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
			}

			.bottom {
				margin-top: 16rpx;

				.user_info {
					flex: 1;
					overflow: hidden;

					image {
						width: 48rpx;
						height: 48rpx;
						border-radius: 24rpx;
					}

					text {
						flex: 1;
						font-size: 24rpx;
						color: #666666;
						margin-left: 12rpx;
					}

				}

				.see {
					view {
						font-size: 24rpx;
						color: #666666;
						margin-left: 6rpx;
					}
				}
			}
		}
	}

	.fixed_btn {
		width: 100vw;
		height: 180rpx;
		padding-bottom: 68rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 16rpx 0rpx rgba(0, 0, 0, 0.05);
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;

		view {
			width: 686rpx;
			height: 100rpx;
			background: #FD2A53;
			border-radius: 50rpx;
			border: 2rpx solid #FD2A53;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
		}
	}

	.to_pay_show {
		padding: 32rpx 32rpx 64rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;

		.title {
			font-weight: 500;
			font-size: 32rpx;
			color: #131313;
			line-height: 44rpx;
		}

		.price {
			margin: 34rpx 0 24rpx;

			i {
				font-weight: 500;
				font-size: 36rpx;
				color: #131313;
				line-height: 50rpx;
				font-style: normal;
			}

			text {
				font-weight: 500;
				font-size: 64rpx;
				color: #131313;
				line-height: 50rpx;
			}
		}

		.pay_type {
			background: #F8F8F8;
			border-radius: 16rpx;
			width: 100%;
			margin: 0 32rpx 64rpx;

			.item {
				height: 100rpx;
				padding: 0 32rpx;

				.left {
					image {
						width: 48rpx;
						height: 48rpx;
						margin-right: 16rpx;
					}

					text {
						font-size: 28rpx;
						color: #131313;
						line-height: 32rpx;
					}
				}

				.right {
					image {
						width: 40rpx;
						height: 40rpx;
					}

					text {
						font-size: 28rpx;
						color: #131313;
						line-height: 32rpx;
						margin-right: 30rpx;
					}
				}
			}
		}

		.btn {
			width: 560rpx;
			height: 96rpx;
			background: #FD2A53;
			border-radius: 50rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
		}

	}

	.store {
		margin-top: 16rpx;
		padding: 0 32rpx;

		.store_tab {
			.store_tab_item {
				transition: 0.3s;
				width: 216rpx;
				height: 72rpx;
				background: #F1F1F1;
				border-radius: 12rpx;
				border: 2rpx solid #F1F1F1;

				text {
					font-size: 28rpx;
					color: #666666;
					transition: 0.3s;
				}
			}

			#select {
				border-radius: 12rpx;
				background: #FFF;
				border: 2rpx solid #FD2A53;

				text {
					color: #FD2A53;
				}
			}
		}
	}

	.store_content {
		.content_product {
			.item {
				padding: 24rpx 0;
				border-bottom: 2rpx solid #F1F1F1;

				.avatar {
					width: 144rpx;
					height: 144rpx;
					margin-right: 18rpx;

					image {
						width: 144rpx;
						height: 144rpx;
						border-radius: 20rpx;
					}
				}

				.name {
					flex: 1;

					.goods_name {
						font-size: 28rpx;
						color: #333333;
						margin-bottom: 6rpx;
					}

					.price {
						text {
							font-weight: 600;
							font-size: 24rpx;
							color: #FD2A53;
						}

						view {
							width: 144rpx;
							height: 56rpx;
							background: #FD2A53;
							border-radius: 28rpx;

							text {
								font-size: 28rpx;
								color: #FFFBFB;
							}
						}
					}
				}
			}

			#noborder {
				border: 0;
			}

			.show_more {
				padding: 32rpx 0;

				text {
					font-size: 24rpx;
					color: #999999;
					line-height: 32rpx;
				}
			}
		}
	}

	.content_store {
		overflow: hidden;
		padding: 46rpx 0;

		.left {
			flex: 1;
			overflow: hidden;

			.avatar {
				width: 144rpx;
				height: 144rpx;
				border-radius: 12rpx;
				overflow: hidden;
				margin-right: 18rpx;

				image {
					width: 144rpx;
					height: 144rpx;
				}
			}

			.nickname {
				flex: 1;
				overflow: hidden;
				align-items: flex-start;
				justify-content: space-around;
				min-height: 120rpx;

				.name {
					overflow: hidden;

					text {
						font-size: 32rpx;
						color: #131313;
					}

					image {
						width: 32rpx;
						height: 32rpx;
						margin-left: 8rpx;
					}
				}

				.sign {
					max-width: 100%;
					font-size: 28rpx;
					color: #666666;
					line-height: 32rpx;
				}

			}
		}

		.right {
			font-weight: 500;
			font-size: 28rpx;
			color: #131313;
			line-height: 40rpx;
		}
	}

	.content_auth {
		padding: 28rpx 0 64rpx;

		.auth_title {
			font-weight: 600;
			font-size: 32rpx;
			color: #131313;
			line-height: 44rpx;
			margin-bottom: 28rpx;
		}

		.real_name {
			text {
				font-size: 28rpx;
				color: #131313;
				line-height: 40rpx;
				margin-right: 16rpx;
			}
		}

		.h60 {
			height: 60rpx;
		}

		image {
			width: 60%;
		}

	}

	.modal {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 0 44rpx 54rpx;
		position: relative;
		z-index: 1;

		.modal_icon {
			background: #FFF;
			border-radius: 112rpx;
			margin-top: -48rpx;
			position: relative;
			z-index: 2;
		}

		.modal_title {
			font-weight: 500;
			font-size: 36rpx;
			color: #131313;
			line-height: 50rpx;
			margin: 16rpx 0 24rpx;
		}

		.modal_text {
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
			text-align: center;
		}

		.modal_button {
			width: 320rpx;
			height: 88rpx;
			background: #FD2A53;
			border-radius: 44rpx;
			margin-top: 48rpx;

			text {
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 40rpx;
			}
		}

		.modal_close {
			position: absolute;
			z-index: 3;
			right: 16rpx;
			top: 16rpx;
		}
	}
</style>